<template>
	<view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in swiperList">
					<view class="swiper-item">
						<image :src="item.url" mode="aspectFit" @error="handleHiddenImg(item)"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="cat_pane">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view class="cat_pane_item" v-for="(cat,index) in paneData" @click="toDetails(cat)">
					<image :src="cat.photo" mode="aspectFill"></image>
					<span class="pane_item_title">{{cat.name}}</span>	
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				swiperList:[
					{
						id:1,
						url:'../../static/cat/cat-1.jpeg',
					},
					{
						id:2,
						url:'../../static/cat/cat-2.jpg',
					},
					{
						id:3,
						url:'../../static/cat/cat-3.jpeg',
					},
					{
						id:4,
						url:'../../static/cat/cat-4.jpg',
					},
				],
				paneData:[
					{
						id:1,
						name:'三花猫',
						photo:'../../static/cat/kunvshi.png',
					},
					{
						id:2,
						name:'美国短毛猫',
						photo:'../../static/cat/meiguoduanmao.png',
					},
					{
						id:3,
						name:'英国短毛猫',
						photo:'../../static/cat/yingguoduanmao.png',
					},
					{
						id:4,
						name:'布偶猫',
						photo:'../../static/cat/buou.png',
					},
					{
						id:5,
						name:'暹罗猫',
						photo:'../../static/cat/xianluo.png',
					},
					{
						id:6,
						name:'狸花猫',
						photo:'../../static/cat/lihua.png',
					},
					{
						id:7,
						name:'苏格兰折耳猫',
						photo:'../../static/cat/sugelanzheer.png',
					},
					{
						id:8,
						name:'波斯猫',
						photo:'../../static/cat/bosi.png',
					},
					{
						id:9,
						name:'狮子猫',
						photo:'../../static/cat/shizi.png',
					},
					{
						id:10,
						name:'俄罗斯蓝猫',
						photo:'../../static/cat/eluosilanmao.png',
					},
					{
						id:11,
						name:'阿比西尼亚猫',
						photo:'../../static/cat/abixiniya.png',
					},
					{
						id:12,
						name:'缅因猫',
						photo:'../../static/cat/mianyin.png',
					},
					{
						id:13,
						name:'孟加拉猫',
						photo:'../../static/cat/mengjiala.png',
					},
				]
				
			}
		},
		methods: {
			
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			handleHiddenImg:function(data){
				this.swiperList = this.swiperList.filter(item => item.id !== data.id)
			},
			toDetails:function(data){
				console.log(data)
				
				uni.navigateTo({
					url: `/pages/component/catDetails?id=${data.id}`
				});
			}
		}
	}
</script>

<style>
	uni-page-body{
		background-color: #F4F3F6;
	}
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 300rpx;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.scroll-Y{
		height: 100%;
		/* margin: 30rpx; */
		/* padding-right: 30rpx; */
		/* background-image: url('../../static/index/home-bg.jpeg'); */
		background-repeat: repeat-y;
	}
	
	.cat_pane_item {
		height: auto;
		padding: 30rpx;
		/* max-height: 300rpx; */
		width: calc(50% - 90rpx);
		float: left;
		/* margin-bottom: 30rpx; */
		/* margin-top: 30rpx; */
		border-radius: 40rpx;
		margin: 30rpx 10rpx 0 10rpx;
		background-color: #ffffffc7;
	}
	.cat_pane_item uni-image{
		width: 100%;
		height: 320rpx;
		border-radius: 40rpx;
	}
	.pane_item_title{
		display: inline-block;
		height: 50rpx;
		line-height: 50rpx;
		width: 100%;
		font-size: 32rpx;
	}
</style>
